<template>
  <div class="i-box" hint="月供详情">
    <nav-bar class="i-nav" hint="导航栏">
      <div slot="middle">月供详情</div>
      <img class="top-back-icon" src="@res/img/common_back.png" alt="" slot="left" @click="back">
    </nav-bar>

    <month-table class="i-content" :month-datas="bMonths" v-show="isBus"></month-table>
    <month-table class="i-content" :month-datas="gMonths" v-show="isGong"></month-table>

    <div v-show="isCombine" class="i-content">
      <cube-tab-bar
        class="i-cube"
        hint="切换还款方式"
        v-model="selectedLabelDefault"
        :data="tabs"
        show-slider
        @click="clickHandler"
      />
      <month-table :month-datas="totalMonths" v-show="selectedLabelDefault==='总计'"></month-table>
      <month-table :month-datas="bMonths" v-show="selectedLabelDefault==='商业贷款'"></month-table>
      <month-table :month-datas="gMonths" v-show="selectedLabelDefault==='公积金贷款'"></month-table>
    </div>
  </div>
</template>

<script>
  import NavBar from "../common/NavBar";
  import MonthTable from "./MonthTable";

  export default {
    name: "Monthly",
    data() {
      return {
        test: 0,
        tabs: [
          {
            label: '总计',
          }, {
            label: '商业贷款',
          }, {
            label: '公积金贷款',
          },],
        selectedLabelDefault: '总计',
        bMonths: [{
          month: 1,//月份
          base: 1,//月本金
          add: 2,//月利息
          total: 3,//月还款
          rest: 4,//总剩余,
          already: 0,//已还金额
        }],
        gMonths: [],
        type: 0,//等额本金或本息
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      clickHandler(label) {

      },

    },
    components: {
      NavBar,
      MonthTable
    },
    created() {
      let p = this.$route.params
      this.gMonths = p.gong
      this.bMonths = p.bus
      if(!this.gMonths && !this.bMonths){
        this.$router.replace("/")
        return
      }
    },
    activated() {

    },
    updated(){
      this.$nextTick(()=>{
        scrollTo(0,0)
      })
    },
    computed: {
      isBus() {
        return (this.gMonths.length < 2 && this.bMonths.length > 1)
      },
      isGong() {
        return (this.gMonths.length > 1 && this.bMonths.length < 2)
      },
      isCombine() {
        return (this.gMonths.length > 1 && this.bMonths.length > 1)
      },
      totalMonths() {
        let res = []
        let gt = this.gMonths.length >= this.bMonths.length ? this.gMonths : this.bMonths
        let lt = this.gMonths.length < this.bMonths.length ? this.gMonths : this.bMonths
        for (let i = 0; i < gt.length; i++) {
          let gItem = {}
          for (let key in gt[i]) {
            gItem[key] = gt[i][key]
          }
          let bItem = {
            base: 0,//月本金
            add: 0,//月利息
            total: 0,//月还款
            rest: 0,//总剩余,
          }
          if (i < lt.length) {
            bItem = lt[i]
          }
          gItem.base = gItem.base + bItem.base
          gItem.add = gItem.add + bItem.add
          gItem.total = gItem.total + bItem.total
          gItem.rest = gItem.rest + bItem.rest
          res.push(gItem)
        }
        return res
      }
    }
  }
</script>

<style scoped>
  .i-box {
  }

  .i-nav {
    position: fixed;
    top: 0;
  }

  .i-content {
    margin-top: 4.2rem;
  }
  .i-cube{
    height: 4rem;
  }
</style>
